<template>
  <div class="phone">
       <Header title="更换手机号" background="#fff"/>
       <div class="check">
         <div class="name">重新核验手机号</div>
         <div class="desc">请核验已绑定的手机号，以便更换新号码</div>
       </div>
       <van-cell-group>
          <van-field type="number" v-model="phone" label="注册手机号" placeholder=""></van-field>
          <van-field v-model="yzm" label="验证码" placeholder="请输入验证码">
            <template #button>
              <van-button @click="getYzm" size="small" type="primary">获取验证码</van-button>
            </template>
          </van-field>
      </van-cell-group>
      <van-row gutter="12" class="fixedPaid" v-show="pageData.isOriginHei">
        <van-col span="24">
          <van-button class="sub sub1" block type="info" @click="$router.push({name: 'newphone'})">确认更换</van-button>
        </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'phone',
  computed: { ...mapGetters({ pageData: 'pageData'}) },
  data () {
    return {
      phone:'',
      yzm:'',
      show: false,
    }
  },
  methods: {
    getYzm() {
  
    },
    // commit('BUSINESSLIST', res.data.info)
    logout() {
      this.$router.push({name: 'login'})
    },
   onSelect(item){
      console.log(item)
      this.show = false
      if(item.type==1) {
      }
    },
    toCancel(){
      console.log('点击了取消');
    }
  },
  mounted() {
  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scope>
.phone {
  padding-top: 50px;

  .check {
    padding: 14px;
    box-sizing: border-box;
    margin-bottom: 10px;

    .name {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
      margin-bottom: 4px;
    }
    .desc {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 20px;
    }

  }
  .yzm {
    position: relative;  
  }
  .tag {
    position: absolute;
    left: 0;
    top: 0;
  }
  .van-cell-group {
    .van-field__body {
      position: relative;
      padding-right: 80px;
    }
    .van-field__button {
      position: absolute;
      width: 80px;
      height: 40px;
      right: -6px;
      top: 50%;
      margin-top: -20px;

    }
    .van-button {
      width: 80px;
      height: 32px;
      margin-top: 4px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      background: none;
      color: #958CE7;
      border: none;
    }
    .van-cell,.van-field__label {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
    .van-field__control{
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }
.fixedPaid {
    bottom: 0;
    left: 0;
    width: 100%;
    position: fixed;
    height: 50px;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    background: #FFFFFF;

    .sub {
      
      width: 100%;
      height: 40px;
      margin-top: 4px;
      border-radius: 40px;
      background: linear-gradient(270deg, #E091A9 0%, #9A7FCF 100%);
      border: none;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fff;
    }
    .sub1 {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fff;
      background: linear-gradient(270deg, #E091A9 0%, #9A7FCF 100%);
      border-radius: 40px;
      border-radius: 40px;
      border: none;
    }
  }

}
</style>
